import React from 'react'
import FullCalendar, { formatDate } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './message-schedules/event-utils'
import "./message-schedules/MessageSchedules.css"

export default class MessageSchedules extends React.Component{
	//这种写法我非常不习惯，非标准，这里可能是create-react-app支持
	state = {
	    weekendsVisible: true,
	    currentEvents: []
  	}
  	render() {
	    return (
	      	<div className='demo'>
		        {this.renderSidebar()}
		        <div className='demo-main'>
		          	<FullCalendar
			            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
			            headerToolbar={{
			            	left: 'prev,next today',
			              	center: 'title',
			              	right: 'dayGridMonth,timeGridWeek,timeGridDay'
			            }}
			            initialView='dayGridMonth'
			            editable={true}
			            selectable={true}
			            selectMirror={true}
			            dayMaxEvents={true}
			            weekends={this.state.weekendsVisible}
			            initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
			            select={this.handleDateSelect}
			            eventContent={renderEventContent} // custom render function
			            eventClick={this.handleEventClick}
			            eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
			            /* you can update a remote database when these fire:
			            eventAdd={function(){}}
			            eventChange={function(){}}
			            eventRemove={function(){}}
			            */
		          	/>

		          	<pre className="conclusion">
		          		部分api使用体会
		          		<br/>
		          		1> 需要安装@fullcalendar/react插件才能以react插件方式使用fullcalender，fullcalender同时提供vue、angular版插件。
		          		<br/>
		          		2> headerToolbar：文档是header选项，默认值是一个Object并且有prev、next、title等值，如果不想使用这些需要将header设为false.
		          		<br/>
		          		3> 可以使用自定义按钮，也是在header选项中设置。
		          		<br/>
		          		4> 关于高度，参数css中的说明。
		          	</pre>

		        </div>
	      	</div>
	    )
  	}
  	renderSidebar() {
	    return (
	      	<div className='demo-sidebar'>
	        	<div className='demo-sidebar-section'>
	          		<h2>Instructions</h2>
	          		<ul>
			            <li>Select dates and you will be prompted to create a new event</li>
			            <li>Drag, drop, and resize events</li>
			            <li>Click an event to delete it</li>
	          		</ul>
	        	</div>
		        <div className='demo-sidebar-section'>
		          	<label>
			            <input
			              type='checkbox'
			              checked={this.state.weekendsVisible}
			              onChange={this.handleWeekendsToggle}
			            ></input>
		            	toggle weekends
		          	</label>
		        </div>
		        <div className='demo-sidebar-section'>
		          	<h2>All Events ({this.state.currentEvents.length})</h2>
		        	<ul>
		            	{this.state.currentEvents.map(renderSidebarEvent)}
		          	</ul>
		        </div>
	      </div>
	    )
  	}
  	handleWeekendsToggle = () => {
    	this.setState({
      		weekendsVisible: !this.state.weekendsVisible
    	})
  	}
  	handleDateSelect = (selectInfo) => {
	    let title = prompt('Please enter a new title for your event')
	    let calendarApi = selectInfo.view.calendar

	    calendarApi.unselect() // clear date selection

	    if (title) {
	      	calendarApi.addEvent({
		        id: createEventId(),
		        title,
		        start: selectInfo.startStr,
		        end: selectInfo.endStr,
		        allDay: selectInfo.allDay
	      	})
	    }
  	}
  	handleEventClick = (clickInfo) => {
		if (window.confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
	    	clickInfo.event.remove()
	    }
  	}
  	handleEvents = (events) => {
    	this.setState({
      		currentEvents: events
    	})
  	}
}
function renderEventContent(eventInfo) {
  	return (
    	<>
      		<b>{eventInfo.timeText}</b>
      		<i>{eventInfo.event.title}</i>
    	</>
  	)
}
function renderSidebarEvent(event) {
  	return (
    	<li key={event.id}>
      		<b>{formatDate(event.start, {year: 'numeric', month: 'short', day: 'numeric'})}</b>
      		<i>{event.title}</i>
    	</li>
  	)
}
